<template>
  <div>
    <Row :gutter="8" align="middle" class="ivu-mb-16">
      <Col span="16">
        <DatePicker
          :editable="false"
          type="daterange"
          v-model="currentTime"
          :options="options"
          placeholder="请选择创建日期"
          @on-change="changeDatatime"
        >
        </DatePicker>
        <Select
          v-model="params.patient_status_id"
          @on-select="askData"
          @on-clear="askData"
          clearable
          style="width: 120px;"
          placeholder="患者状态"
          class="ivu-ml-8"
        >
          <Option v-for="item in hzstatus" :value="item.id" :key="item.id">{{
            item.label
          }}</Option>
        </Select>
        <CheckboxGroup class="ivu-inline ivu-ml-8" @on-change="askData">
          <Checkbox v-model="have_image" label="有图"></Checkbox>
          <Checkbox v-model="no_image" label="无图"></Checkbox>
        </CheckboxGroup>
        <Select
          v-model="firstChannel"
          @on-change="changeSource"
          clearable
          style="width: 120px;"
          placeholder="一级渠道"
          class="ivu-ml-8"
        >
          <Option
            v-for="item in sourceList"
            :value="item.value"
            :key="item.id"
            >{{ item.label }}</Option
          >
        </Select>
        <Select
          v-model="secondChannel"
          multiple
          @on-change="changeSecondSource"
          clearable
          style="width: auto;"
          placeholder="二级渠道"
          class="ivu-ml-8"
        >
          <Option
            v-for="item in secondSourceList"
            :value="item.value"
            :key="item.id"
            >{{ item.label }}</Option
          >
        </Select>
      </Col>
      <Col span="8" style="text-align:right;">
        <b>核验病种：</b>
        <Tooltip max-width="200" :content="chooseDis.join(',')" placement="top">
          <span v-for="(item, index) in chooseDis" :key="index">
            <template v-if="index < 3">
              <template v-if="index < chooseDis.length - 1 && index < 2">
                {{ item }},
              </template>
              <template v-else>
                {{ item }}
              </template>
            </template>
          </span>
          <span v-if="chooseDis.length > 3">...</span>
        </Tooltip>
        <a class="edit ivu-ml-8" v-hasC="btnShow[7]" @click="handdleEdit"
          ><Icon type="ios-create-outline" />编辑</a
        >
      </Col>
    </Row>
    <Table
      :columns="columns"
      :data="data"
      @on-filter-change="handleFilterChange"
      @on-sort-change="changeSort"
      :loading="loading"
    >
      <template slot="status" slot-scope="{ row }">
        <Tag :color="statusColor[row.status_name]">{{ row.status_name }}</Tag>
      </template>
      <template slot="info" slot-scope="{ row }">
        <a @click="showInfo(row)"
          >{{ row.name }}({{ row.gender_str }}{{ row.age }})</a
        >
      </template>
    </Table>

    <Page
      :total="total"
      class="ivu-mt-16"
      :current.sync="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
    />
    <Modal v-model="showModal" title="核验病种配置" footer-hide>
      <TreeSelect v-model="chosedDis" multiple :data="disList" />
      <div class="modalFoot">
        <Button @click="modalcancel()">取消</Button>
        <Button
          class="ivu-ml-16"
          :loading="modalloading"
          type="primary"
          @click="modalSbmit()"
          >确定</Button
        >
      </div>
    </Modal>

    <patient-detail
      ref="patientDetail"
      :btnShow="btnShow"
      :tabChange="true"
      :listParams="params"
      @askData="$emit('refresh')"
    />
  </div>
</template>
<script>
import patientDetail from "@/components/patientDetail";
import { noCheckList, diseasesCheckList, updateDiseasesCheck } from "@/api/jzy";
export default {
  components: { patientDetail },
  data() {
    const noVisitList = [
      {
        label: "0-10天未访",
        value: 1,
      },
      {
        label: "11-20天未访",
        value: 2,
      },
      {
        label: "21-30天未访",
        value: 3,
      },
      {
        label: "31-60天未访",
        value: 4,
      },
      {
        label: "60天以上未访",
        value: 5,
      },
    ];
    return {
      loading: false,
      showModal: false,
      modalloading: false,
      chooseDis: [],
      disList: [],
      currentTime: "",
      btnShow: [
        {
          name: "v1-diseasecheck-index-sub",
          flag: "v1/diseasecheck/index/sub",
        },
        {
          name: "v1-diseasecheck-index-edit-remark",
          flag: "v1/diseasecheck/index/edit-remark",
        },
        {
          name: "v1-diseasecheck-index-update",
          flag: "v1/diseasecheck/index/update",
        },
        {
          name: "v1-diseasecheck-callback-callback-common-list",
          flag: "v1/diseasecheck/callback/callback-common-list",
        },
        {
          name: "v1-diseasecheck-index-edit-tags",
          flag: "v1/diseasecheck/index/edit-tags",
        },
        {
          name: "v1-diseasecheck-index-edit-tags2",
          flag: "v1/diseasecheck/index/edit-tags",
        },
        {
          name: "v1-diseasecheck-index-check",
          flag: "v1/diseasecheck/index/check",
        },
        {
          name: "v1-diseasecheck-index-edit",
          flag: "v1/diseasecheck/index/edit",
        },
      ],
      statusColor: {
        预约: "#5cadff",
        跟进中: "primary",
        未开口: "#dcdee2",
        意向一般: "default",
        到诊: "success",
        老患者到诊: "warning",
        无效: "#c5c8ce",
      },
      params: {
        page: 1,
        pageSize: 10,
        created_stime: "",
        created_etime: "",
        patient_status_id: "",
        channel_id: "",
        have_image: 0,
        no_image: 0,
        not_callback_start: "",
        not_callback_end: "",
        sort_column: "",
        sort_order: "",
      },
      have_image: false,
      no_image: false,
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      columns: [
        {
          title: "基本信息",
          slot: "info",
          fixed: "left",
          width: 150,
        },
        {
          title: "病种",
          key: "patient_diseases_name",
          width: 180,
        },
        {
          title: "诊断病种",
          key: "by_diseases_name",
          width: 180,
        },
        {
          title: "归属人",
          key: "belong_member_name",
          width: 120,
        },
        {
          title: "未访天数",
          key: "diff_day",
          sortable: "custom",
          width: 140,
          filters: noVisitList,
          filterMultiple: false,
          filterRemote(value) {
            this.filterType = value[0];
          },
        },
        {
          title: "图片数量",
          key: "image_num",
          sortable: "custom",
          width: 110,
        },
        {
          title: "渠道",
          key: "source_name",
          width: 120,
        },
        {
          title: "患者状态",
          slot: "status",
          width: 120,
        },
        {
          title: "备注",
          key: "remark",
          minWidth: 200,
          tooltip: true,
        },
        {
          title: "创建时间",
          key: "created_at_str",
          sortable: "custom",
          width: 120,
        },
      ],
      total: 0,
      data: [],
      filterType: undefined,
      hzstatus: [],
      chosedDis: [],
      firstChannel: "",
      secondChannel: [],
      sourceList: [],
      secondSourceList: [],
    };
  },
  methods: {
    getData() {
      this.$store.commit("admin/account/changeCloseRefresh", false);
      this.loading = true;
      // this.params.patient_status_id=this.params.patient_status_id?1:0
      this.params.have_image = this.have_image ? 1 : 0;
      this.params.no_image = this.no_image ? 1 : 0;
      noCheckList(this.params).then((res) => {
        this.data = res.list.list;
        localStorage.setItem("userList", JSON.stringify(this.data));
        this.total = res.list.total;
        this.hzstatus = res.list.patient_status;
        this.sourceList = res.list.source_channel;
        this.$emit("getTotal", this.total);
        this.loading = false;
      });
    },
    askData() {
      this.params.page = 1;
      this.getData();
    },
    showInfo(row) {
      this.$refs.patientDetail.handleOpen(row);
    },
    changeDatatime(e) {
      this.params.created_stime = e[0];
      this.params.created_etime = e[1];
      this.askData();
    },
    changeSort(e) {
      if (e.key == "created_at_str") {
        this.params.sort_column = "created_at";
      } else if (e.key == "diff_day") {
        this.params.sort_column = "last_callback_diff_time";
      } else {
        this.params.sort_column = e.key;
      }
      this.params.sort_order = e.order;
      this.getData();
    },
    handleFilterChange(value) {
      if (+value._filterChecked[0] === 1) {
        this.params.not_callback_start = this.$Date()
          .subtract(10, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date().format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 2) {
        this.params.not_callback_start = this.$Date()
          .subtract(20, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(11, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 3) {
        this.params.not_callback_start = this.$Date()
          .subtract(30, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(21, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 4) {
        this.params.not_callback_start = this.$Date()
          .subtract(60, "day")
          .format("YYYY-MM-DD");

        this.params.not_callback_end = this.$Date()
          .subtract(31, "day")
          .format("YYYY-MM-DD");
      } else if (+value._filterChecked[0] === 5) {
        this.params.not_callback_start = "";
        this.params.not_callback_end = this.$Date()
          .subtract(61, "day")
          .format("YYYY-MM-DD");
      } else {
        this.params.not_callback_start = "";
        this.params.not_callback_end = "";
      }
      this.getData();
    },
    changeSource(e) {
      this.secondSourceList = [];
      this.secondChannel = [];
      this.sourceList.forEach((item) => {
        if (item.value == e) {
          this.secondSourceList = item.children;
        }
      });
      this.params.channel_id = e;
      this.askData();
    },
    changeSecondSource(e) {
      this.params.channel_id = e.join(",");
      this.askData();
    },
    formChangePage(e) {
      this.params.pageSize = e;
      this.getData();
    },
    formSize(e) {
      this.params.page = e;
      this.getData();
    },
    handdleEdit() {
      this.getdisList();
      this.showModal = true;
    },
    modalcancel() {
      this.showModal = false;
    },
    modalSbmit() {
      let params = [];
      this.chosedDis.forEach((item) => {
        this.disList.forEach((ele) => {
          if (ele.value == item) {
            params.push({
              diseases_id: item,
              diseases_child_id: 0,
            });
          } else {
            ele.children.forEach((child) => {
              if (child.value == item) {
                params.push({
                  diseases_id: ele.value,
                  diseases_child_id: item,
                });
              }
            });
          }
        });
      });
      updateDiseasesCheck({ list: params }).then((res) => {
        this.getdisList();
        this.getData();
        this.showModal = false;
      });
    },
    changeData(data) {
      data.forEach((item) => {
        if (item.children && item.children.length > 0) {
          item.disabled = true;
        }
      });
      return data;
    },
    getdisList() {
      this.chosedDis = [];
      diseasesCheckList().then((res) => {
        this.chooseDis = res.diseases.split(",");
        this.disList = this.changeData(res.diseases_list);
        this.chosedDis = res.diseases_id;
      });
    },
  },
  mounted() {
    this.params.created_stime = this.$Date()
      .subtract(2, "day")
      .format("YYYY-MM-DD");
    this.params.created_etime = this.$Date().format("YYYY-MM-DD");
    this.currentTime = [this.params.created_stime, this.params.created_etime];
    this.getData();
    this.getdisList();
  },
};
</script>
<style lang="less" scoped>
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
</style>
